<template>
  <div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容"
                v-model="input"
                class="input-with-select">
        <el-select v-model="select"
                   slot="prepend"
                   placeholder="请选择">
          <el-option label="运单号"
                     value="waybill_number"></el-option>
          <el-option label="司机姓名"
                     value="driver_name"></el-option>
        </el-select>
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="find()"></el-button>
        <el-button slot="append"
                   icon="el-icon-refresh"
                   @click="findAll()"></el-button>
      </el-input>
    </div>
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column prop="freightBill.waybill_number"
                       label="运单编号"
                       fixed="left"
                       width="200">
      </el-table-column>
      <el-table-column prop="driver_name"
                       label="司机"
                       width="70">
      </el-table-column>
      <el-table-column label="发货地"
                       prop="freightBill.faddress"
                       width="70">
      </el-table-column>
      <el-table-column label="收货地"
                       prop="freightBill.saddress"
                       width="70">
      </el-table-column>
      <el-table-column label="发货时间"
                       column-key="datetime"
                       prop="freightBill.date"
                       width="200">
      </el-table-column>
      <el-table-column label="收货时间"
                       prop="freightBill.estimated_time"
                       width="200">
      </el-table-column>
      <el-table-column label="发货人"
                       prop="fuser"
                       width="100">
      </el-table-column>
      <el-table-column prop="suser"
                       label="收货人"
                       width="100">
      </el-table-column>
      <el-table-column prop="freightBill.freight"
                       label="运费"
                       width="100">
      </el-table-column>
      <el-table-column prop="freightBill.premium"
                       label="保险费"
                       width="100">
      </el-table-column>
      <el-table-column label="操作"
                       width="230"
                       fixed="right">
        <template slot-scope="scope">
          <span v-if="scope.row.freightBill.status != '0'">
            <el-button size="mini"
                       type="info"
                       round
                       icon="el-icon-check"
                       @click="aa">运单已完成</el-button>
          </span>
          <span v-if="scope.row.freightBill.status=== '0'">
            <span v-if="scope.row.driver_name=== '未分配'">
              <el-button size="mini"
                         type="success"
                         round
                         icon="el-icon-edit"
                         @click="updatePrem(scope.$index, scope.row)">分配司机</el-button>
            </span>
            <span v-if="scope.row.driver_name != '未分配'">
              <el-button size="mini"
                         type="success"
                         round
                         icon="el-icon-edit"
                         @click="updatePrem(scope.$index, scope.row)">重选司机</el-button>
            </span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next,sizes"
                   :total="total"
                   :page-sizes=[5,10,30,50]
                   page-size="5"
                   @current-change="tiao"
                   @prev-click="syy"
                   @next-click="xyy"
                   @size-change="ydx">
    </el-pagination>
    <el-dialog title="确认司机"
               :visible.sync="editFormVisible">
      <el-table :data="driverdata">
        <el-table-column property="id"
                         label="id"
                         width="160"></el-table-column>
        <el-table-column property="employe_name"
                         label="姓名"
                         width="160"></el-table-column>
        <el-table-column property="sex"
                         label="性别"
                         width="160"></el-table-column>
        <el-table-column label="操作"
                         width="160">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="success"
                       round
                       icon="el-icon-star-on"
                       @click="queren(scope.$index, scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      userid: '',
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '新增货运单',
      editForm: {
        fusername: "",
        fusernumber: "",
        faddress: "",
        fphone: "",
        susername: "",
        sphone: "",
        saddress: "",
        fdate: "",
        paytype: "1",
        ismove: "0",
        jiankuan: "",
        weight: "",
        tiji: "",
        isfragile: "0",
        note: "",
        distance: "",
        time: "",
        flag: "",
        freightid: ""
      },
      driverdata: {
        id: "",
        name: "",
        sex: ""
      },
      total: 1000,
      pageSize: 5,
      currentPage: "1",
      img1: "",
      img2: "",
      flocation: "",
      slocation: "",
      input: "",
      select: "",
      f: "请选择发货时间",
      selectwaybillnumber: "",

    }
  },
  created () {
    this.getdata()
  },
  inject: ["refresh"],
  methods: {
    getdata () {
      this.$axios.get("/api/vehicle/all/" + this.currentPage + "/" + this.pageSize).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        console.log(res);
      })
    },
    closeDialog () {
      this.editFormVisible = false
    },
    updatePrem: function (index, row) {
      this.editFormVisible = true
      console.log(row.freightBill.waybill_number);
      this.selectwaybillnumber = row.freightBill.waybill_number;
      this.$axios.get("/api/vehicle/driver").then(res => {
        console.log(res);
        this.driverdata = res.data.data
      })

    },
    tiao (res) {
      console.log("99999", res);
      this.currentPage = res;
      this.getdata()
    },
    syy (res) {
      this.currentPage = res;
    },
    xyy (res) {
      this.currentPage = res;
    },
    ydx (res) {
      this.pageSize = res;
    },
    del (index, row) {
      this.$axios.delete("/api/freight/del/" + row.id).then(res => {
        this.refresh()
      });
    },
    add () {
      this.editFormVisible = true
    },
    find () {
      console.log(this.select, this.input);
      if (this.select == "") {
        alert("请选择查询的内容")
      }
      this.$axios.post("/api/vehicle/findSome/" + this.currentPage + "/" + this.pageSize + "/" + this.select + "/" + this.input).then(res => {
        console.log(res);
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    findAll () {
      this.select = ""
      this.input = ""
      this.getdata()
    },
    queren (index, row) {
      console.log(row);
      this.$axios.get("/api/vehicle/updateDriver/" + this.selectwaybillnumber + "/" + row.id).then(res => {
        alert("分配成功")
        this.editFormVisible = false;
        this.getdata()
      })
    }
  }
}
</script>
